<template>
  <div class="box">
    <div class="formbox">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
      <div>
        {{ this.token }}
      </div>
    </div>
  </div>
</template>

<script lang="js">

import { mapActions,mapState } from 'vuex';
import { Notify } from 'vant';
export default {
  data() {
    return {
      phone: 13412341235,
      password: "abc123",
    };
  },
  computed: {
            ...mapState('user', ['token', 'info']),
    },
  mounted(){

        },
  methods: {
    ...mapActions('user', ['getToken']),
   async onSubmit(values) {
   let res=await this.getToken({phone:this.phone,password:this.password})
   debugger
   console.log(res);
   if (res.status==200) {
    Notify({ type: 'success', message: '登录成功' });
    this.$router.push("/layout")
   }else{
    Notify({ type: 'success', message: '账号密码错误' });
   }

    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  float: left;
}
.formbox {
  width: 90%;
  height: 200px;
  margin: auto;
  .input {
    width: 20px;
  }
}
</style>
